import type { IconifyIcon } from "@iconify/types";
import type { Component, FunctionalComponent } from "vue";
import ep from "@iconify/json/json/ep.json";
import ri from "@iconify/json/json/ri.json";
import { addCollection } from "@iconify/vue/offline";
import { defineComponent, h } from "vue";
import iconifyIcon from "@/components/ReIcon/src/iconifyIcon";

interface iconType {
    // iconify (https://docs.iconify.design/icon-components/vue/#properties)
    inline?: boolean;
    width?: string | number;
    height?: string | number;
    horizontalFlip?: boolean;
    verticalFlip?: boolean;
    flip?: string;
    rotate?: number | string;
    color?: string;
    onLoad?: (icon: any) => any;
    fill?: string; // svg 需要什么SVG属性自行添加
    style?: object; // all icon
}

/** 渲染图标 */
export function useRenderIcon(icon: FunctionalComponent | IconifyIcon | string, attrs?: iconType): Component {
    // 传入组件的话则为本地图标
    if (typeof icon === "object" || typeof icon === "string") {
        return defineComponent({
            name: "OfflineIcon",
            render() {
                return h(iconifyIcon, { icon, ...attrs });
            },
        });
    } else {
        throw new TypeError("icon must be an object or a string");
    }
}

/**
 * 设置离线图标, 必须设置后才能使用 @iconify/vue/offline
 * 使用addCollection导入图标集, 也可以使用 addIcon 按需引入
 * 主要用于内网环境下的动态图标设置, 占用打包体积
 */
export function setOfflineIcons(): void {
    addCollection(ep);
    addCollection(ri);
}
